<template>
	<view class="content" v-if="pageShow">
		<view class="padding">
			<view class="padding ffffff radius">
				<view class="">
					<view class="nofocusbgc">标题</view>
					<view class="flexleft margin_top">
						<textarea name="" id="" cols="10" rows="10" placeholder-class="placeHolder" placeholder="请输入标题"
							style="height: 140rpx;font-size: 30rpx;" v-model="title"></textarea>
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top">
				<view class="">
					<view class="nofocusbgc">描述</view>
					<view class="flexleft margin_top">
						<textarea name="" id="" cols="10" rows="10" placeholder-class="placeHolder" placeholder="请输入描述"
							style="height: 140rpx;font-size: 30rpx;" v-model="description"></textarea>
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top">
				<view class="flexbetween">
					<view class="nofocusbgc">收费</view>
					<view class="flexleft">
						<view :class="is_free==1?'select':'noSelect'" style="margin-right: 25rpx;" @click="free(1)">
							免费
						</view>
						<view :class="is_free==0?'select':'noSelect'" @click="free(0)">
							收费
						</view>
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top" v-show="is_free==0">
				<view class="flexbetween">
					<view class="nofocusbgc">收费金额</view>
					<view class="flexleft">
						<input type="text" placeholder="请输入金额" placeholder-style="color: #999999;font-size: 30rpx;"
							style="text-align: right;" v-model="price">
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top" v-show="is_free==0">
				<view class="flexbetween">
					<view class="nofocusbgc">设置免费时长</view>
					<view class="flexleft">
						<input type="number" placeholder="请输入免费时长(秒)" placeholder-style="color: #999999;font-size: 30rpx;"
							style="text-align: right;" v-model="free_seconds">
					</view>
				</view>
			</view>
			<view class="padding ffffff radius margin_top" style="margin-bottom: 150rpx;">
				<view class="nofocusbgc">上传视频</view>
				<view class="flexleft flex_wrap">
					<view class="item_image_box margin_top" v-if="video_link_arr">
						<view class="item_image radius">
							<video :src="video_link_arr"></video>
							<!-- <image :src="video_link_arr" mode="widthFix"></image> -->
							<view class="deletimg" @click="deleimage(index,video_link_arr)"></view>
						</view>
					</view>
					<!-- 图片盒子 -->
					<view class="item_image_box margin_top" @click="uploadImg(1,video_link_arr)" v-if="!video_link_arr">
						<view class="item_image radius">
							<image src="/static/image/home/novideo.png" mode="widthFix"></image>
							<!-- <view class="deletimg"></view> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 固定底部 -->
			<view class="gudingdb ffffff" style="z-index: 999999;">
				<view class="bigbtn" @click="sendVideo">发布</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	import upFile from "@/utils/upload.js"
	export default {
		data() {
			return {
				images: [],
				title: "", //视频标题
				description: "", //视频描述
				is_free: 0, //是否免费 0收费 1免费
				price: "", //金额
				free_seconds: "", //免费时长
				video_id: "", //视频id
				videoInfo: {}, //视频详情
				video_link: "", //视频链接
				video_link_arr: "", //视频链接
				pageShow:true
			}
		},
		onLoad(options) {
			if (options.id) {
				this.video_id = options.id
				this.pageShow=false
				uni.setNavigationBarTitle({
					title: "编辑视频"
				})
				this.getVideoInfo()
			}
		},
		methods: {
			getVideoInfo() { //视频详情
				let _this = this
				httpRequest.request('/api/community/getform', 'GET', {
					id: _this.video_id
				}).then(res => {
					if (res.code == 1) {
						_this.title = res.data.info.title
						_this.description = res.data.info.description
						_this.is_free=res.data.info.is_free
						_this.price=_this.is_free==0?res.data.info.price:""
						_this.free_seconds=_this.is_free==0?res.data.info.free_seconds:""
						_this.video_link=res.data.info.video_link
						_this.video_link_arr=res.data.info.video_link_text
						// console.log(_this.video_link_arr)
						_this.pageShow=true
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			free(type) { //免费或者收费
				this.is_free = type
			},
			sendVideo() { //发布视频
				let _this = this
				if (!_this.title) {
					httpRequest.toast("请输入标题！");
					return false
				}
				if (!_this.description) {
					httpRequest.toast("请输入描述！");
					return false
				}
				if (_this.is_free == 0) {
					if (!_this.price) {
						httpRequest.toast("请输入金额！");
						return false
					}
					if (!_this.free_seconds) {
						httpRequest.toast("请输入免费时长！");
						return false
					}
				}
				if (!_this.video_link) {
					httpRequest.toast("请上传视频！");
					return false
				}
				httpRequest.request('/api/community/publish', 'POST', {
					id: _this.video_id,
					type: 1,
					title: _this.title, //标题
					description: _this.description, //描述
					is_free: _this.is_free, //是否免费:0=收费,1=免费
					price: _this.price, //价格
					free_seconds: _this.free_seconds, //免费时长
					video_link: _this.video_link, //视频链接
				}).then(res => {
					if (res.code == 1) {
						httpRequest.toast(res.msg);
						setTimeout(() => {
							uni.navigateBack(1)
						}, 500)
					} else if (res.code == 0) {
						httpRequest.toast(res.msg);
					} else {
						httpRequest.toast('网络开小差啦');
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			uploadImg(value, upImgs) {
				let _this = this
				upFile.chooseVideo({

				}, function(res) {
					console.log(res);
					_this.video_link = res.url
					_this.video_link_arr = res.fullurl
					// that.martial_images_arr.push(res.fullurl)
					// that.martial_images.push(res.url)
				})
			},
			deleimage(i, upimg) { //删除图片
				upimg = ""
				this.video_link = ""
			},
		}
	}
</script>

<style lang="scss" scoped>
	.noSelect {
		background: rgba(102, 102, 102, .1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid rgba(102, 102, 102, .1);
		padding: 20rpx 45rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.select {
		background: rgba(243, 39, 28, 0.1);
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #F3271C;
		padding: 20rpx 45rpx;
		text-align: center;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3271C;
	}

	.placeHolder {
		color: #999999;
		font-size: 30rpx;
	}

	.nofocusbgc {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.item_image_box {
		width: 33.33%;
	}

	.item_image {
		position: relative;
		width: 180rpx;
		height: 180rpx;

		video {
			width: 100%;
			height: 100%;
		}

		image {
			width: 100%;
			height: 100%;
		}
	}
</style>